<template>
  <div class="table-ctrl-body">
    <!--按钮组-->
    <div class="Btns-ctrl-body">

      <!--高级搜索-->
      <SearchPublic
        :searchObj="searchObj"
        @searchParams="searchParamsFn"
      ></SearchPublic>

      <div class="btns f-r">
        <button type="button" class="btn btn-info" @click="toggleAddModal">新增</button>
        <button type="button" class="btn btn-warning" @click="toggleRevampModal">修改</button>
        <button type="button" class="btn btn-danger" @click="deleteFn">删除</button>
      </div>
    </div>
    <!--按钮组闭合-->
    <!--表格组-->
    <div class="table-ctrl">
      <!--表格头-->
      <!--{{treeTableRow}}-->
      <div class="table-header">
        <table class="table-default">
          <thead>
          <tr>
            <th v-for="ths in tableHeader">
              {{ths.value}}
            </th>
          </tr>
          </thead>
        </table>
      </div>
      <!--表格中部-->
      <div class="table-overflowX">
        <table class="table-default">
          <tbody>
          <tr
            v-for="(trs,index) in tableRow.list"
            @click="selectRow(trs,index)"
            :class="{active: index === isActive}"
          >
            <td v-for="tds in tableHeader">
              {{trs[tds.key]}}
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!--表格翻页-->
      <Pages
        v-show="tableRow.total !== 0"
        v-if="tableRow"
        :showItem="10"
        :pageSize="20"
        :allDataSum="tableRow.total"
        :allpage="(Math.ceil(tableRow.total/20))"
        @current-change="tablePageData"
      ></Pages>

    </div>

    <!--新增-->
    <AddMapMenuModal
      :addModalObj="addModalObj"
      @closeModal="toggleAddModal"
    ></AddMapMenuModal>

    <!--修改-->
    <RevampMapMenuModal
      :RevampModalObj="RevampModalObj"
      :selectRowId="selectRowId"
      @closeRevampModal="toggleRevampModal"
    ></RevampMapMenuModal>

  </div>
</template>

<script>
  import Pages from "../../sudoku/atom/pages"
  import AddMapMenuModal from "./AddMapMenuModal"
  import RevampMapMenuModal from "./RevampMapMenuModal"
  import SearchPublic from "../../publicTemplate/search/SearchPublic"
  export default {
    name: "mapMenuTable",
    data(){
      return{
        isActive:-1,
        selectRowId:"",
        tableHeader:[
          {"key":"NAME","value":"名称"},
          {"key":"PARENT_MENU_CODE","value":"父级菜单编码"},
          {"key":"TARGET_MENU_CODE","value":"目标菜单编码"},
          {"key":"CATEGORY","value":"数据类别"},
          {"key":"STATION_ID_PARSE","value":"所属部门"},
        ],
        tableRow:[],
        tableRowParams : {
          pageIndex:"1", //当前页
          pageSize:"20", //数量
        },
        addModalObj:{
          isShow:false,
          upUserId:""
        },
        RevampModalObj:{
          isShow:false,
          upUserId:""
        },
        searchContent:"", //搜索设备号
        isDetailsModal:false, //是否为查看界面
        imgSrc:"",
        params : {
          "columns": ["*"],
          "conditions": [],
          "dataTypeCode": "pointresource",
          "pageIndex": 1,
          "pageSize": 20,
          "tableName": "T_RES_MAP_DICTIONARY_RELATION",
          "sorters":[
            {
              "order": "asc",
              "sortField": "PARENT_MENU_CODE"
            }
          ]
        },
        searchObj:{
          condition:[
            {"title":"名称","key":"NAME",'type':'text',"value":'','data':''},
            {"title":"所属单位","key":"STATION_ID","value":'','type':'treeSection','data':''},
            {"title":"父级菜单编码","key":"PARENT_MENU_CODE",'type':'text',"value":'','data':''},
            {"title":"数据类别","key":"CATEGORY",'type':'text',"value":'','data':''},
            {"title":"目标菜单编码","key":"TARGET_MENU_CODE",'type':'text',"value":'','data':''},
          ],
          htmlType:"searchDefaultPublic",
        },
      }
    },
    components:{
      Pages,
      AddMapMenuModal,
      RevampMapMenuModal,
      SearchPublic
    },
    created(){
      this.tableRowAjax();
    },
    mounted(){
      this.getAreaList();
    },
    methods:{
      //获取所属地区
      getAreaList(){
        //POST /dictionary/{key}
        this.$axios.get(this.HOST+"/station/getOrgaInfo")
          .then(res=>{
            //console.log(res);
            this.searchObj.condition[1].data = res.data.data;
          })
          .catch(err=>{
            //console.log(err);
          })
      },
      //加载表格
      tableRowAjax(){
        //POST /base/query/page
        //清除选择
        this.clearSelect();
        //console.log(this.params);
        //debugger;
        this.$axios.post(this.HOST+"/base/query/page",this.params)
          .then((data)=>{
            //console.log(data);
            this.tableRow = data.data.data;
          })
          .catch((err)=>{
            //console.log(err);
          })
      },
      //翻页加载
      tablePageData(page){
        this.params.pageIndex = page;
        this.tableRowAjax();
        ////console.log(page);
      },
      //新增弹窗显示与隐藏
      toggleAddModal(){
        this.addModalObj.isShow = !this.addModalObj.isShow;
        if( this.addModalObj.isShow === false ){
          //重新加载表格
          this.tableRowAjax();
        }
      },
      //修改弹窗显示与隐藏
      toggleRevampModal(){
        if( this.selectRowId !=="" ){
          this.RevampModalObj.isShow = !this.RevampModalObj.isShow;
          this.isDetailsModal = false;
        }else{
          this.s_alert("请选择需要修改的地图菜单！");
        }
        if( this.RevampModalObj.isShow === false ){
          //重新加载表格
          this.tableRowAjax();
        }
      },
      //搜索功能
      searchDotResource(){
        if( this.searchContent === "" ){
          this.params.conditions = [];
        }else{
          this.params.conditions = [
            {"field":"NAME","symbol":"like","value":"%"+this.searchContent+"%"}
          ];
        }
        this.tableRowAjax();
      },
      //选择行
      selectRow(obj,index){
        //console.log(obj);
        this.selectRowId = obj.ID;
        this.isActive = index;
      },
      //删除
      deleteFn(){
        if( this.selectRowId !=="" ){
          let msg = confirm("请问是否删除该地图菜单？");
          if( msg ){
            //DELETE /base/remove
            let params = {
              "conditions": [
                {
                  "field": "ID",
                  "symbol": "=",
                  "value": this.selectRowId
                }
              ],
              "dataTypeCode": "pointresource",
              "tableName": "T_RES_MAP_DICTIONARY_RELATION"
            };
            this.$axios.delete(this.HOST+"/base/remove",{
              data:params
            })
              .then((data)=>{
                //console.log(data);
                this.s_alert("删除成功！");
                this.s_logwrite("系统-地图菜单","删除地图菜单");
                this.tableRowAjax();
              })
              .catch((err)=>{
                this.s_alert("删除失败！");
                //console.log(err);
              })
          }
        }else{
          this.s_alert("请选择需要删除的地图菜单！");
        }
      },
      //搜索
      searchParamsFn(searchParams){
        //console.log(this.searchObj.condition);
        let searchParamsArr = [];
        for( let i=0;i<this.searchObj.condition.length;i++ ){
          if( this.searchObj.condition[i].value && this.searchObj.condition[i].value !=="" ){
            if( this.searchObj.condition[i].key === "DISTRICT" ){
              searchParamsArr.push(
                {"field": this.searchObj.condition[i].key,"symbol":"=","value":this.searchObj.condition[i].value}
              )
            }else{
              searchParamsArr.push(
                {"field": this.searchObj.condition[i].key,"symbol":"like","value":"%"+this.searchObj.condition[i].value+"%"}
              )
            }

          }
        }
        this.params.conditions = searchParamsArr;
        this.tableRowAjax();
      },
      //清除选择
      clearSelect(){
        this.isActive=-1;
        this.selectRowId="";
      }
    }
  }
</script>

<style scoped>

</style>
